<script setup lang="ts">
  import { defineProps, ref, watch } from 'vue';
  import { useBooleanStore } from '@/store';

  const props = defineProps<{
    tableData: any;
  }>();
  const columns: any[] = [
    {
      title: '配套类型',
      dataIndex: 'addType',
      align: 'center',
      ellipsis: true,
      tooltip: true,
      width: 100,
    },
    {
      title: '物料名称',
      dataIndex: 'itemName',
      ellipsis: true,
      tooltip: true,
      width: 160,
    },
    {
      title: '图号',
      dataIndex: 'itemCode',
      ellipsis: true,
      tooltip: true,
      width: 160,
    },
    {
      title: '质量编号/件号',
      dataIndex: 'qualityCode',
      ellipsis: true,
      tooltip: true,
      width: 200,
    },

    {
      title: '托盘号',
      dataIndex: 'toolCode',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
      ellipsis: true,
      tooltip: true,
      width: 160,
    },
    {
      title: '箱子号',
      dataIndex: 'workbinCode',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
      ellipsis: true,
      tooltip: true,
      width: 160,
    },

    {
      title: '创建时间',
      dataIndex: 'creationDate',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
      ellipsis: true,
      tooltip: true,
      width: 180,
    },
    {
      title: '架次',
      dataIndex: 'startPlaneNo',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
      ellipsis: true,
      tooltip: true,
      width: 100,
    },

    {
      title: '批次',
      dataIndex: 'batchNo',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
      ellipsis: true,
      tooltip: true,
      width: 100,
    },
    {
      title: '站位',
      dataIndex: 'station',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
      ellipsis: true,
      tooltip: true,
      width: 160,
    },
    {
      title: 'AO编码',
      dataIndex: 'aoCode',
      ellipsis: true,
      tooltip: true,
      width: 180,
    },
    {
      title: '装配图号',
      dataIndex: 'repartAss',
      ellipsis: true,
      tooltip: true,
      width: 160,
    },
    {
      title: '需求数量',
      dataIndex: 'itemQty',
      ellipsis: true,
      tooltip: true,
      width: 100,
    },
    {
      title: '配套数量',
      dataIndex: 'matchQty',
      ellipsis: true,
      tooltip: true,
      width: 100,
    },

    {
      title: '分拣数量',
      dataIndex: 'packageCount',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
      ellipsis: true,
      tooltip: true,
      width: 120,
    },
    {
      title: '退库数量',
      dataIndex: 'returnQty',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
      ellipsis: true,
      tooltip: true,
      width: 120,
    },

    {
      title: '二次配套数量',
      dataIndex: 'secondQty',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
      ellipsis: true,
      tooltip: true,
      width: 150,
    },
    {
      title: '条码',
      dataIndex: 'barcode',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
      ellipsis: true,
      tooltip: true,
      width: 200,
    },

    {
      title: '是否分拣',
      dataIndex: 'isSort',
      ellipsis: true,
      tooltip: true,
      width: 160,
    },
    {
      title: '配套状态',
      dataIndex: 'state',
      ellipsis: true,
      tooltip: true,
      width: 160,
    },
    {
      title: '配送状态',
      dataIndex: 'deliveryState',
      ellipsis: true,
      tooltip: true,
      width: 160,
    },
    {
      title: '配送时间',
      dataIndex: 'deliveryTime',
      ellipsis: true,
      tooltip: true,
      width: 160,
    },
    {
      title: '配送人',
      dataIndex: 'deliveryEmpCode',
      ellipsis: true,
      tooltip: true,
      width: 160,
    },
    {
      title: '月计划',
      dataIndex: 'monthTime',
      ellipsis: true,
      tooltip: true,
      width: 180,
    },
    {
      title: '周计划',
      dataIndex: 'weekTime',
      ellipsis: true,
      tooltip: true,
      width: 180,
    },
    {
      title: '日计划',
      dataIndex: 'dailyTime',
      ellipsis: true,
      tooltip: true,
      width: 180,
    },

    {
      title: '工艺更改类型',
      dataIndex: 'artChangeType',
      ellipsis: true,
      tooltip: true,
      width: 160,
    },
    {
      title: '机型',
      dataIndex: 'productCode',
      ellipsis: true,
      tooltip: true,
      width: 160,
    },
    {
      title: '工作包编码',
      dataIndex: 'packageCode',
      ellipsis: true,
      tooltip: true,
      width: 160,
    },
    {
      title: '物料类型',
      dataIndex: 'itemType',
      ellipsis: true,
      tooltip: true,
      width: 160,
    },
    {
      title: '合格证',
      dataIndex: 'mesCheckQualiticationId',
      ellipsis: true,
      tooltip: true,
      width: 160,
    },
    {
      title: '台账ID',
      dataIndex: 'wmsItemInventoryId',
      ellipsis: true,
      tooltip: true,
      width: 160,
    },
    // {
    //   title: '操作',
    //   dataIndex: 'action',
    //   slotName: 'action',
    //   align: 'center',
    //   fixed: 'right',
    // },
  ];

  const booleanStore = useBooleanStore();
  const hStyle = ref({
    'background-color': booleanStore.color,
    'border-radius': booleanStore.borderRadius,
  });

  // 创建一个响应式的本地副本
  const localTableData = ref<any[]>([]);
  // 数据库一共有多少条
  const total = ref<number>(0);
  const pageNum = ref<number>(1);
  const pageSize = ref<number>(30);
  function onDel(record: any) {
    // 通过record删除
  }
  // 监听props.tableData的变化，并更新本地副本
  watch(
    () => props.tableData,
    () => {
      localTableData.value = props.tableData?.responseBody?.result || [];
      total.value =
        props.tableData?.responseBody?.pageParameter?.totalCount || 0;
    },
    { immediate: true }
  );
  function change(e: any) {
    pageNum.value = e;
  }
  function changeSize(e: any) {
    pageSize.value = e;
  }
  // 监听页面变化
  watch([pageNum, pageSize], () => {
    booleanStore.setPage(pageNum.value, pageSize.value, 14);
  });
</script>

<template>
  <a-card :header-style="hStyle" :bordered="false">
    <template #title>
      <div class="font">工作包分拣任务列表</div>
    </template>

    <a-table
      :stripe="true"
      class="top-table"
      :pagination="false"
      :columns="columns"
      :data="localTableData"
      column-resizable
      :scroll="{ y: 400 }"
    >
      <template #id="{ record }">
        {{ localTableData.indexOf(record) + 1 }}
      </template>
      <!-- <template #action="{ record }">
        <a-popconfirm
          content="你确定要删除这条数据吗?"
          ok-text="确认"
          cancel-text="取消"
          @ok="onDel(record)"
        >
          <a-button type="text" class="font-color">删除</a-button>
        </a-popconfirm>
      </template> -->
    </a-table>
    <div class="page-position">
      <a-pagination
        :total="total"
        :current="pageNum"
        :page-size="pageSize"
        show-total
        show-jumper
        show-page-size
        :page-size-options="[30, 50, 100, 500]"
        @change="change"
        @update:page-size="changeSize"
      />
    </div>
  </a-card>
</template>

<style scoped>
  .top-table {
    white-space: nowrap;
  }
  .page-position {
    margin-top: 20px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .font {
    font-size: 20px;
    color: black;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI',
      Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue',
      sans-serif;
  }
</style>
